<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAsDELmuOSQh2x6rOkeMR1FRTinQmAoIpAbE0OY077NMR3enrO0RQneZQr3gCDD_OB-ki66PwOomxhzg"
      type="text/javascript"></script>

				<script type="text/javascript" src="dwr/engine.js"> </script>
				<script type="text/javascript" src="dwr/interface/LayoutImpl.js"> </script>
				<script type="text/javascript" src='js/schema.js'></script>

        <script type="text/javascript" src="lib/utils.js"></script>
        <script type="text/javascript" src="lib/ext/events.js"></script>
        <script type="text/javascript" src="lib/observer.js"></script>
        <script type="text/javascript" src="lib/tree.js"></script>
        <script type="text/javascript" src="lib/dragdrop.js"></script>
        <script type="text/javascript" src="lib/framework.js"></script>
        <script type="text/javascript" src="lib/schemaJSON.js"></script>
        <script type="text/javascript" src="lib/objectinspector.js"></script>



    </head>
    <body onload="load()" onunload="GUnload()">
        <style>
            .treeview li.submenu { /* Style for LI that contains sub lists (other ULs). */
                cursor: hand !important;
                cursor: pointer !important;
            }
            
            .treeview ul {
                margin: 0;
                padding: 0;
            }
            
            .treeview li {
                list-style-type: none;
                padding-left: 10px;
                margin-bottom: 2px;
                color: #466F93;
                font-weight: bold;
                font-family: verdana, arial, sans serif;
                line-height: 16px;
                font-size: 13px;
            }
            
            .title-blue {
                color: #466F93;
                font-weight: bold;
                font-family: verdana, arial, sans serif;
                line-height: 16px;
                font-size: 12px;
            }
            
            div {
                position: absolute;
            }
            
            .itemselect {
                cursor: pointer;
            }
            
            .toolbox-item {
                color: #466F93;
                font-weight: bold;
                font-family: verdana, arial, sans serif;
                line-height: 16px;
                font-size: 13px;
                width: 180px;
                cursor: pointer;
            }
            
            .caption {
                color: #466F93;
                font-weight: bold;
                font-family: verdana, arial, sans serif;
                line-height: 16px;
                font-size: 11px;
            }
            
        </style>
		
        <!-- ToolBox Object Inspector -->
        <style>
            .objectinspector table {
                width: 189px;
                height: 50px;
                background-color: #F0F0F0;
            }
            
            .objectinspector th {
                font-size: 13px;
                background-color: #D8E9FB;
            }
            
            .objectinspector td {
                width: 50%;
                font-weight: bold;
                font-family: verdana, arial, sans serif;
                line-height: 16px;
                font-size: 12px;
            }
            
            .tabpanel {
                position: absolute;
                font-size: 11px;
                left: 5px;
                top: 3px;
            }
            
            .tabpanelImg {
                font-size: 11px;
                top: 49px;
            }
        </style>
		
        <div id="schema">
            <span id="result"></span>
			
		<div id="content_googlemaps">
			<div id="googlemaps" style="visibility: hidden; width: 500px; height: 300px"></div>
	        </div>
		</div>

		<!-- Exemplo de TreeView -->
		<div id="content_treeviewWidget">
			<div id="treeviewWidget" style="top:-20px; heigth:50px; overflow:auto; visibility:hidden"><ul id="_treeview"class="treeview"style="heigth:50px; overflow:auto;display:inline;"><li style=" ">humbertorocha<ul><li style="background-color:white">03-05-2008<ul><li>05:50:12</li><li>05:52:04</li><li>05:54:50</li></ul></li><li style="background-color:white">19-05-2008<ul><li>06:24:00</li><li>09:21:14</li><li>09:25:55</li></ul></li></ul></li><li style=" ">ricardoserra<ul><li style="background-color:white">03-05-2008<ul><li>05:50:12</li><li>05:52:04</li><li>05:54:50</li></ul></li><li style="background-color:white">19-05-2008<ul><li>06:24:00</li><li>09:21:14</li><li>09:25:55</li></ul></li></ul></li></ul></div>
		</div>

        <div id="panelOI" style="position:absolute; top:10px; height:50px;">
            <table id="objectInspector" width="189px" class="objectinspector">
                <tr>
                    <th colspan="2" class="title-blue">
                        Object Inspector
                    </th>
                </tr>
                <tr>
                    <th style="background-color: #F0F0F0" colspan="2">
                        <select on id="comboWidgets" style="width: 171px;" name="listWidgets">
                            <option selected>Panel: Window01</option>
                        </select>
                    </th>
                </tr>
                <tr>
                    <td colspan="2">
                        &nbsp;
                        <div class="tabpanelImg" style="background-image:url(img/tab.active.png); background-repeat:repeat-x; left:13px; width:148px">
                            &nbsp;
                            <div id="tabProperties" class="tabpanel">
                                Properties 
                            </div>
                            <div id="tabEvents" class="tabpanel" style="left:90px; color:#999999;">
                                Events
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
	                        <div id="OIParams">
	                        </div>
						
                    </td>
                </tr>
            </table>
            <div id="toolboxLayout">
                <table border="1" cellpadding="2" cellspacing="2" style="border:hidden; left:10px; width:115%;">
                    <tr>
                        <th class="toolbox-top" scope="col">
                            <font class="caption">
                                Toolbox
                            </font>
                        </th>
                    </tr>
                    <tr>
                        <td style="background-color:#E3E5E7">
                            &nbsp;<img src="img/search.gif" class="itemselect" />&nbsp;<input type="text" style="width:100px; height:13px;" name="filterComponent"/><img src="img/expandall.gif" class="itemselect"/>&nbsp;<img src="img/collapseall.gif" class="itemselect"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div id="toolbox" class style="height:190px; overflow:auto">
                                <table id="components" width="195px">
                                    <tr>
                                        <td id="panel" class="toolbox-item">
                                            <img comp="" src="img/window.png"/>  Window 
                                        </td>
                                    </tr>
                                    <tr>
                                        <td id="treeview" class="toolbox-item">
                                            <img comp="treeviewWidget" src="img/chart_organisation.gif"/>  History
                                        </td>
                                    </tr>
                                    <tr>
                                        <td id="container" class="toolbox-item">
                                            <img comp="" src="img/container.png"/>  Menu
                                        </td>
                                    </tr>
                                    <tr>
                                        <td id="map" class="toolbox-item">
                                            <img comp="googlemaps" src="img/map.png"/>  Map
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
			
            <script>
            	var map = null;
            	// ============================== Google Maps =============================
				function load() {
			        map = new GMap2(document.getElementById("googlemaps"));
			        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
			    }
                // ============================== TOOLBOX =================================
                var rows = document.getElementById("components").getElementsByTagName("td");
                for (var i = 0; i < rows.length; i++) {
                    rows[i].parentNode.onmousemove = function(e){
                        this.getElementsByTagName("td")[0].style.backgroundColor = "#DBE1D3";
                    }
                    rows[i].parentNode.onmouseout = function(e){
                        this.getElementsByTagName("td")[0].style.backgroundColor = "#FFFFFF";
                    }
					
					if (rows[i].id == "panel") {
						rows[i].parentNode.onclick = function(e){
							widget.createPanel("window");
						}
					}
                }
                
                document.getElementById("comboWidgets").onchange = function(){
                    loadPropertiesOI(this.options[this.selectedIndex].value);
                }
                
				loadEffectItemSelected();
            </script>
			
            <script type="text/javascript">
                // ============================== Initialization Layout =================================                
                //Cria o layout inicial
                buildDesign.create(jsRegion2);
                buildDesign.create(jsRegion3);
                
                //Insere inicialmente os widgets em cada window criado
                document.getElementById("region02").appendChild(document.getElementById("objectInspector"));
                document.getElementById("region03").appendChild(document.getElementById("toolboxLayout"));
                
                buildDesign.renderize("region02", "resize02", "fixmodify02", "menubar02", "statusbar02");
                buildDesign.renderize('region03', 'resize03', 'fixmodify03', 'menubar03', 'statusbar03');
                
	            createTree("_treeview");
							flatten('_treeview', 'compact');

				
            </script>
            <script>
            
            	function actionButton(){
			        	//(new JsonBind()).getJsonWidget("window0");
			        	$layout.list();

            	
            	}
            </script>
            
            
            <br><br><br><br><br><br><br><br><br><br><br><br>
            <input type="button" name="CLICA_AQUI" value="     CLICA AQUI PORRA    " onclick="actionButton()"/>
            
            </body>
        </html>
